<template>
  <view id="login">
    <view class="body">
      <image src="@/static/index/logo.png" class="logo" mode="widthFix" />
      <view class="text1">一杯好茶，一口软软包</view>
      <view class="text2">在奈雪遇见两种美好</view>
      <button class="but" @click="tologinson">登录</button>
      <view class="text3">新用户登录即加入会员，享会员权益</view>
      <view class="navbox">
        <view class="navson" v-for="(item,i) in navlist" :key="i">
          <image :src=item.img class="navimg" mode="widthFix" />
          <view class="navtit">{{item.name}}</view>
        </view>
      </view>
      <view class="tit">会员权益说明</view>
    </view>
  </view>
</template>

<script setup>

const navlist = [{
  img:'../../static/user/kim1.png',
  name:'入会有礼'
},{
  img:'../../static/user/kim2.png',
  name:'积分兑换'
},{
  img:'../../static/user/kim3.png',
  name:'升级特权'
},{
  img:'../../static/user/kim4.png',
  name:'生日特权'
},{
  img:'../../static/user/kim5.png',
  name:'奈雪宝藏'
},];
const tologinson = ()=>{
  uni.navigateTo({
    url: "/pages/login/loginson",
  });
}
</script>

<style lang="scss">
#login{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #F0F8FA;
  .body{
    width: 94%;
    margin: auto;
    height: 100%;
    text-align: center;
    .logo{
      width: 30%;
      margin: 150rpx 0;
    }
    .text1{
      font-size: 0.9rem;
      color: #BCC0C2;
      margin-bottom: 40rpx;
    }
    .text2{
      font-size: 0.9rem;
      color: #BCC0C2;
    }
    .but{
      margin: 110rpx 0;
      background-color: #ADB838;
      color: white;
      border-radius: 50rpx;
    }
    .text3{
      color: #BCC0C2;
      font-size: 0.9rem;
    }
    
    .navbox{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 80rpx 0;


      .navson{
        width: 20%;
        text-align: center;
        .navimg{
          width: 70%;
        }
        .navtit{
          font-size: 0.8rem;
          color: #919294;
        }
      }
    }
    .tit{
      color: #AFB940;
      font-size: 0.9rem;
    }
  }
}
</style>
